<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-clearmin.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/roboto.css">
    <link rel="stylesheet" type="text/css" href="assets/css/material-design.css">
    <link rel="stylesheet" type="text/css" href="assets/css/small-n-flat.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <title>Clearmin Docs</title>
  </head>
  <body class="cm-no-transition cm-1-navbar">
    <div id="cm-menu">
      <nav class="cm-navbar cm-navbar-primary">
        <div class="cm-flex cm-logo" style="background-image:url(assets/img/logo.svg)"></div>
        <div class="btn btn-primary md-menu-white" data-toggle="cm-menu"></div>
      </nav>
      <div id="cm-menu-content">
        <div id="cm-menu-items-wrapper">
          <div id="cm-menu-scroller">
            <ul class="cm-menu-items">
              <li class="active"><a href="#" class="sf-house">This page is active</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <header id="cm-header">


      <nav class="cm-navbar cm-navbar-primary">
        <div class="btn btn-primary md-menu-white hidden-md hidden-lg" data-toggle="cm-menu"></div>

	<div class="dropdown">
          <button class="btn btn-primary md-add-circle-outline-white" data-toggle="dropdown"></button>
	  <ul class="dropdown-menu">
	    <li><a href="#">Hi there</a></li>
	  </ul>
	</div>

        <div class="cm-flex"><h1><i class="fa fa-fw fa-arrow-left"></i> Click this dropdown !</h1></div>
      </nav>


      <nav class="cm-navbar cm-navbar-yellow" style="z-index:49">
        <div class="cm-flex">
	  <h1>This button toggle the search bar</h1>
	  <form id="cm-search" action="index.html" method="get">
            <input type="search" name="q" autocomplete="off" placeholder="Search...">
          </form>
	</div>
	<div class="pull-right">
          <div id="cm-search-btn" class="btn btn-yellow md-search-white" data-toggle="cm-search"></div>
        </div>	
      </nav>


      <nav class="cm-navbar cm-navbar-default">
        <div class="cm-flex">
	  <div class="cm-breadcrumb-container">
            <ol class="breadcrumb">
              <li><a href="#">This thing</a></li>
              <li><a href="#">Is</a></li>
              <li><a href="#">A</a></li>
              <li><a href="#">Pretty</a></li>
              <li><a href="#">Long breadcrumb</a></li>
              <li><a href="#">Or some random stuff</a></li>
              <li><a href="#">Maybe</a></li>
              <li><a href="#">Overflowing</a></li>
              <li class="active">Lorem Page</li>
            </ol>
          </div>
	</div>

	<div class="dropdown pull-right" style="width:150px;border-left:1px solid #ddd">
          <div class="btn btn-default btn-block" data-toggle="dropdown"><i class="fa fa-fw fa-question-circle"></i> Hey, click me !</div>
	  <ul class="dropdown-menu">
	    <li><a href="#">Hello</a></li>
	    <li><a href="#">World</a></li>
	  </ul>

	</div>
	<div class="pull-right" style="border-left:1px solid #ddd"><div class="btn btn-default md-alarm"></div></div>
	<div class="pull-right" style="border-left:1px solid #ddd"><div class="btn btn-default md-cached"></div></div>
	<div class="pull-right" style="border-left:1px solid #ddd"><div class="btn btn-default md-cloud-download"></div></div>

      </nav>


      <nav class="cm-navbar cm-navbar-info">

        <div class="cm-flex">
	  <h1>Check those popovers</h1>
	</div>

	<div class="dropdown pull-right">
          <button class="btn btn-info sf-social-facebook" data-toggle="dropdown"></button>
          <div class="popover cm-popover bottom">
            <div class="arrow"></div>
            <div class="popover-content">
	      <div style="color:#222;padding:20px;">Hi! #1</div>
	    </div>
	  </div>
	</div>

	<div class="dropdown pull-right">
          <button class="btn btn-info sf-social-youtube" data-toggle="dropdown"></button>
          <div class="popover cm-popover bottom">
            <div class="arrow"></div>
            <div class="popover-content">
	      <div style="color:#222;padding:20px;">Hi! #2</div>
	    </div>
	  </div>
	</div>


	<div class="dropdown pull-right">
          <button class="btn btn-info sf-social-google-plus" data-toggle="dropdown"></button>
          <div class="popover cm-popover bottom">
            <div class="arrow"></div>
            <div class="popover-content">
	      <div style="color:#222;padding:20px;">Hi! #3</div>
	    </div>
	  </div>
	</div>


      </nav>




    </header>
    <div id="global">
      <footer class="cm-footer"><span class="pull-right">&copy; ACME Inc.</span></footer>
    </div>
    <script src="assets/js/lib/jquery.min.js"></script>
    <script src="assets/js/jquery.mousewheel.min.js"></script>
    <script src="assets/js/jquery.cookie.min.js"></script>
    <script src="assets/js/fastclick.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/clearmin.min.js"></script>
  </body>
</html>
